<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.设置canvas -->
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      // 2.获取canvas
      const canvas = document.getElementById('canvas')
      // 3.得到ctx  (getContext返回一个包含绘制图形的方法和属性的对象)
      const ctx = canvas.getContext('2d')
      // 4.绘制圆
      //大圆
      ctx.beginPath()
      ctx.arc(80, 80, 55, 0, Math.PI * 2)
      ctx.closePath()
      ctx.fillStyle = 'skyblue'
      ctx.fill()
      // 小圆
      ctx.beginPath()
      ctx.arc(80, 80, 30, 0, Math.PI * 2)
      ctx.closePath()
      ctx.fillStyle = 'green'
      ctx.fill()
    </script>
  </body>
</html>
